<!--3D中国平面图-->

<template>
  <div class="w-h-full">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <div v-resize="resizeHandle" style="width: 100%; height: 100%;">
      <div :id="'chart-'+component.id+'-'+chartDomNum" class="w-h-full"></div>
    </div>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import ChartCompMixin from '@/mixin/ChartCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  const _this = {
    name: 'China3DMapChart', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin, ChartCompMixin],
    attr: {
      version: '1.1',
      configDataTemp: Object.assign({

        // 组件相关配置属性，Echarts图表组件的相关配置属性，必须在chartOption对象下定义
        chartOption: {
          pn_chart_type: 'echarts-gl',
          title: PnDesigner.buildTitleConfigData(),
          tooltip: {
            show: true
          },
          visualMap: [
            {
              min: 0,
              max: 5000,
              minColor: '#bbdefb',
              maxColor: '#2196f3'
            },
            {
              min: 0,
              max: 300,
              minColor: '#ffe0b2',
              maxColor: '#ff9800'
            }
          ],
          map3D: {
            name: '3D热力地图',
            roam: true,
            boxHeight: 10,
            label: {
              show: false,
              textStyle: {
                color: '#fff',
                fontSize: 12,
                opacity: 1
              },
            },
            itemStyle: {
              normal: {
                color: '#2C6192',
                opacity: 1,
                borderWidth: 0.3,
                borderColor: '#fff'
              }
            },
            viewControl: { // 用于鼠标的旋转，缩放等视角控制
              distance: 100, // 视角距离
              beta: 0, // 左右旋转
              alpha: 40 // 上下旋转
            },
          },
          lines3D: {
            name: '人口迁徙',
            effect: {
              constantSpeed: 100
            },
            lineStyle: {
              color: '',
              width: 0.2,
              opacity: 0.9
            }
          },
          bar3D: {
            name: '收入总数(万元)',
            barSize: 1, // 柱子粗细
            label: {
              show: false,
              formatter: '{b}'
            },
          }

        }

      }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
        ds_resultObjTemplate: [
          {field: 'series', remark: '系列类型，只能有三种类型：map3D、lines3D、bar3D'},
          {field: 'name', remark: '名称，map3D与bar3D系列特有'},
          {field: 'value', remark: '值，map3D与bar3D系列特有'},
          {field: 'from', remark: '起始坐标，lines3D系列特有，定义飞线图的起始坐标'},
          {field: 'to', remark: '终点坐标，lines3D系列特有，定义飞线图的终点坐标'},
          {field: 'coord', remark: '坐标，bar3D系列特有，定义柱子的坐标'}
        ],
        ds_resultObj: [
          {series: 'map3D', name: '广东省', value: 4000},
          {series: 'map3D', name: '广西壮族自治区', value: 1000},
          {series: 'map3D', name: '上海市', value: 3605},
          {series: 'map3D', name: '北京市', value: 5000},
          {series: 'map3D', name: '湖北省', value: 2495},

          {series: 'lines3D', from: '116.4551,40.2539', to: '87.9236,43.5883'},
          {series: 'lines3D', from: '116.4551,40.2539', to: '91.1865,30.1465'},
          {series: 'lines3D', from: '116.4551,40.2539', to: '119.5642,28.1854'},

          {series: 'bar3D', name: '广州', coord: '113.23,23.16', value: 33},
          {series: 'bar3D', name: '南宁', coord: '108.33,22.84', value: 280},
          {series: 'bar3D', name: '广州', coord: '102.73,25.04', value: 23},
          {series: 'bar3D', name: '南京', coord: '118.78,32.04', value: 10},

        ],
        ds_useFilter: true, // 是否使用过滤器，默认不使用
        ds_useTimer: true, // 是否开启定时器配置，默认不开启
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildEchartCompCustomOption())
    },
    data() {
      return {}
    },
    mounted() {
      this.$PnApi.MapGeoJsonApi.getGeoJsonByAdCode('100000').then(result => {
        this.$Echarts.registerMap('100000', result.data);
        this.init();
      })

      this.setTimer(() => { //定时器，如果当前组件不使用定时器，可以将此段代码删除
        this.init()
      })
    },
    methods: {
      init() { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode()
        }, (result) => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode()
        });
      }
    },
    computed: {
      chartOption() {

        let option = {
          title: PnDesigner.buildTitleChartOption(this.component.compConfigData.chartOption.title),
          tooltip: {
            show: true,
          },
          visualMap: [
            {
              type: 'continuous',
              seriesIndex: 0,
              show: false,
              text: ['map3D'],
              calculable: false,
              min: this.component.compConfigData.chartOption.visualMap[0].min,
              max: this.component.compConfigData.chartOption.visualMap[0].max,
              inRange: {
                color: [
                  this.component.compConfigData.chartOption.visualMap[0].minColor,
                  this.component.compConfigData.chartOption.visualMap[0].maxColor
                ]
              }
            },
            {
              type: 'continuous',
              seriesIndex: 2,
              show: false,
              text: ['bar3D'],
              calculable: false,
              min: this.component.compConfigData.chartOption.visualMap[1].min,
              max: this.component.compConfigData.chartOption.visualMap[1].max,
              inRange: {
                color: [
                  this.component.compConfigData.chartOption.visualMap[1].minColor,
                  this.component.compConfigData.chartOption.visualMap[1].maxColor
                ]
              }
            }
          ],
          geo3D: {
            map: '100000',
            show: false,
            roam: true,
            regionHeight: 0,
            boxHeight: this.component.compConfigData.chartOption.map3D.boxHeight,
            viewControl: { // 用于鼠标的旋转，缩放等视角控制
              distance: this.component.compConfigData.chartOption.map3D.viewControl.distance,
              beta: this.component.compConfigData.chartOption.map3D.viewControl.beta, // 左右旋转
              alpha: this.component.compConfigData.chartOption.map3D.viewControl.alpha,
            },
          },
          series: [
            {
              name: this.component.compConfigData.chartOption.map3D.name,
              type: 'map3D',
              map: '100000',
              regionHeight: 0,
              nameProperty: 'id',
              boxHeight: this.component.compConfigData.chartOption.map3D.boxHeight,
              label: {
                show: this.component.compConfigData.chartOption.map3D.label.show,
                textStyle: {
                  color: this.component.compConfigData.chartOption.map3D.label.textStyle.color,
                  fontSize: this.component.compConfigData.chartOption.map3D.label.textStyle.fontSize,
                  opacity: this.component.compConfigData.chartOption.map3D.label.textStyle.opacity,
                  backgroundColor: 'rgba(0,0,0,0)'
                },
              },
              itemStyle: {
                normal: {
                  color: this.component.compConfigData.chartOption.map3D.itemStyle.normal.color,
                  opacity: this.component.compConfigData.chartOption.map3D.itemStyle.normal.opacity,
                  borderWidth: this.component.compConfigData.chartOption.map3D.itemStyle.normal.borderWidth,
                  borderColor: this.component.compConfigData.chartOption.map3D.itemStyle.normal.borderColor
                },
                emphasis: {
                  color: this.component.compConfigData.chartOption.map3D.itemStyle.normal.color,
                  opacity: 0.5,
                }
              },
              shading: 'lambert',
              viewControl: { // 用于鼠标的旋转，缩放等视角控制
                distance: this.component.compConfigData.chartOption.map3D.viewControl.distance,
                beta: this.component.compConfigData.chartOption.map3D.viewControl.beta, // 左右旋转
                alpha: this.component.compConfigData.chartOption.map3D.viewControl.alpha,
              },
              data: []
            },
            {
              name: this.component.compConfigData.chartOption.lines3D.name,
              type: 'lines3D',
              coordinateSystem: 'geo3D',
              effect: {
                show: this.$store.state.release.pageMetadata ? true : false,
                trailWidth: 1.5,
                trailOpacity: 0.5,
                trailLength: 0.2,
                constantSpeed: this.component.compConfigData.chartOption.lines3D.effect.constantSpeed
              },
              blendMode: 'lighter',
              lineStyle: {
                color: this.component.compConfigData.chartOption.lines3D.lineStyle.color,
                width: this.component.compConfigData.chartOption.lines3D.lineStyle.width,
                opacity: this.component.compConfigData.chartOption.lines3D.lineStyle.opacity
              },
              data: []
            },
            {
              name: this.component.compConfigData.chartOption.bar3D.name,
              type: 'bar3D',
              coordinateSystem: 'geo3D',
              bevelSize: 0.2,
              bevelSmoothness: 10,
              barSize: this.component.compConfigData.chartOption.bar3D.barSize,
              minHeight: 1,
              label: {
                show: this.component.compConfigData.chartOption.bar3D.label.show,
                formatter: this.component.compConfigData.chartOption.bar3D.label.formatter
              },
              itemStyle: {
                color: '#17e3ff',
                opacity: 1
              },
              zlevel: 100,
              data: [],
            },
            /*{
              name: 'scatter3D',
              type: "scatter3D",
              coordinateSystem: 'geo3D',
              symbol: 'circle',
              symbolSize: function(value) {
                return value[2]
              },
              opacity: 1,
              label: {
                show: false,
                formatter: '{b}'
              },
              blendMode: 'lighter',
              zlevel: 100,
              data: [
                // {
                //   name: '广州',
                //   value: [113.23, 23.16, 12]
                // },
                // {
                //   name: '昆明',
                //   value: [102.73, 25.04, 22]
                // }
              ]
            },*/
          ]
        };

        let groupItem = this.$PnUtil.groupArray(this.runCustomFilter(this.component.compConfigData.ds_resultObj), 'series');
        if (groupItem) {
          groupItem.forEach(item => {
            // 处理map3D的数据源绑定
            if (item.type == 'map3D') {
              item.list.forEach(l => {
                option.series[0].data.push({
                  name: l.name,
                  value: l.value
                })
              })
            }
            if (item.type == 'lines3D') {
              item.list.forEach(l => {
                let fromArr = l.from.split(',');
                let toArr = l.to.split(',');
                option.series[1].data.push({
                  "coords": [
                    [fromArr[0].trim(), fromArr[1].trim(), 10],
                    [toArr[0].trim(), toArr[1].trim(), 10]
                  ]
                })
              })
            }
            if (item.type == 'bar3D') {
              item.list.forEach(l => {
                let coordArr = l.coord.split(',');
                option.series[2].data.push({
                  name: l.name,
                  value: [coordArr[0].trim(), coordArr[1].trim(), l.value]
                })
              })
            }
          })
        }

        return option;
      }
    }
  };

  export default _this
</script>

<style scoped>

</style>
